<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="./libs/vue.global.js"></script>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
</noscript>
<div id="app">
    <p> {{state.message}}</p>
    <p @click="add">{{state.num}}</p>
    <p>{{doubleCount}}</p>
    <p @click="dcount">{{count}}</p>
</div>

</body>

<script>
    const {createApp, reactive,ref, computed, onMounted} = Vue;
    let app = createApp({
        setup() {
            let state = reactive({
                message: '一个消息',
                num: 1,
            })

            let count = ref(1)

            let doubleCount = computed(() => state.num * 2)
            onMounted(() => {
                console.log("挂载完成");
            })
            function add() {
                state.num++;
            }

            function dcount() {
                count.value = count.value*2;
            }

            return {state,count,dcount, add ,doubleCount}
        }
    }).mount("#app");
</script>

</html>
